<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml"
	  xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <title>成绩管理</title>
    <meta charset="utf-8">
	<link rel="stylesheet" href="./css/grade/jquery.mobile-1.4.5.min.css">
	<script src="./js/grade/jquery.min.js"></script>
	<script src="./js/grade/jquery.mobile-1.4.5.min.js"></script>
	<script src="./js/grade/jquery.min.js(1)"></script>
	<script src="./js/grade/bootstrap.min.js"></script>


	<script src="./js/grade/vue.js"></script>
	<script src="./js/grade/vue.min.js"></script>
	<script src="./js/grade/vue-resource.min.js"></script>
    <!--<script src="https://unpkg.com/vue/dist/vue.js"></script>-->
    <!--<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">-->
    <!--<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>-->
    <!--<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>-->
	<!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
	<!--<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">-->
	<!--<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>-->
	<!--<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>-->

	<!--<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>-->
	<!--<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>-->

    <!--<link type="text/css" rel="stylesheet" th:href="@{/css/userHome.css}">-->
	<!-- href="css/test.css" -->
	<style type="text/css">
		th {
		    border-bottom: 1px solid #d6d6d6;
		}
		tr {
    		border-bottom: 1px solid #d6d6d6;
		}

		td {
    		border-bottom: 1px solid #d6d6d6;
		}
		#pagebox{
			text-align: center;
		}
	</style>
</head>
<body>
	<div data-role="page" id="pageone">	
	<!-- 面板 -->
	<div data-role="panel" id="myPanel"> 
    	<a href="#" class="ui-btn ui-icon-home ui-btn-icon-left">主页</a>
    	<a href="#" class="ui-btn ui-icon-calendar ui-btn-icon-left">查看课表</a>
    	<a href="GradeManagement.html" class="ui-btn ui-icon-search ui-btn-icon-left" data-ajax=false>成绩管理</a>
    	<a href="#" class="ui-btn ui-icon-gear ui-btn-icon-left">毕业系统</a>
  	</div>  	
  	<!-- 头部 -->
	<div data-role="header">
    	<a href="#myPanel" class="ui-btn ui-shadow ui-corner-all ui-icon-bullets ui-btn-icon-notext">更多</a>
    	<h1>教务管理系统</h1>
  	</div>  	
  	<!-- 主体 -->
  	<div data-role="main" class="ui-content" id="search">		
  		<div data-role="content">
  			<form method="post" action="#">
      			<fieldset data-role="fieldcontain">
	        		<label>学年</label>
	        		<select v-model="start" @change="get_course(semester,start)">
	        			<option value="all">全部</option>
                        <option value="2019">2019-2020</option>
		         		<option value="2018">2018-2019</option>
		         		<option value="2017">2017-2018</option>
		         		<option value="2016">2016-2017</option>
	        		</select>
      			</fieldset>
      			<fieldset data-role="fieldcontain">
	        		<label>学期</label>
	        		<select v-model="semester" @change="get_course(semester,start)">
						<option value="0">--请选择--</option>
						<option value="all">全部</option>
		         		<option value="1">1</option>
		         		<option value="2">2</option>
		         		<option value="3">3</option>
	        		</select>
      			</fieldset>

				<fieldset data-role="fieldcontain">
					<label>课程</label>
					<select v-model="cno">
						<option value="0">--请选择--</option>
						<option value="-1" >全部</option>
						<option v-bind:value="cs.cno" v-for="cs in courses">{{cs.cname}}</option>
					</select>
				</fieldset>
				<fieldset data-role="fieldcontain">
					<label>学号</label>
                    <input type="text" placeholder="选填" v-model="sno" id="sno" name="sno">
				</fieldset>
    		</form>
  		</div>
        <div style="text-align:right">
            <input type="submit" data-inline="true" v-on:click="search_go()" value="查询">
        </div>
		<style>
		*{margin: 0;padding: 0;}
		#tablebox{width: 100%;overflow-y: hidden;overflow-x: auto;}
		#table td {border-width: 0 1px 1px 0;padding: 4px 5px;vertical-align: middle;white-space: nowrap;text-align: right;text-align: left;}
		#table{width: 100%;border-collapse: 0;border-spacing: 0;}
		#table1{width: 100%;border-collapse: 0;border-spacing: 0;}
		#table2{width: 100%;border-collapse: 0;border-spacing: 0;}
		</style>
  		<div id="tablebox">
  		<table id="table" data-role="table" data-mode="columntoggle:none" class="ui-responsive ui-shadow" data-column-btn-text="显示或隐藏列">
      		<thead>
        		<tr>
			        <th>查看</th>
			        <th>学年</th>
			        <th>学期</th>
			        <th data-priority="1">课程代码</th>
			        <th>课程名称</th>
			        <th data-priority="1">开课学院</th>
			        <th>学分</th>
			        <th data-priority="1">学号</th>
			        <th data-priority="1">姓名</th>
			        <th data-priority="1">成绩</th>
			        <th>修改</th>
        		</tr>
      		</thead>
      		<tbody>
                <tr v-for="grade in gradeList">
			        <td>
			        	<a href="#myPopupDialog" data-rel="popup" data-position-to="window" v-on:click="detail(grade)">查看</a>
			        </td>
			        <td><p>{{grade.start}}</p></td>
			        <td><p>{{grade.semester}}</p></td>
			        <td><p>{{grade.cno}}</p></td>
			        <td><p>{{grade.cname}}</p></td>
			        <td><p>{{grade.college}}</p></td>
			        <td><p>{{grade.credit}}</p></td>
			        <td><p>{{grade.sno}}</p></td>
			        <td><p>{{grade.sname}}</p></td>
			        <td><p>{{grade.totalscore}}</p></td>
			        <td>
			        	<a v-if="permission" href="#myPopup" data-rel="popup" data-position-to="window" v-on:click="detail(grade)" >修改</a>
						<a v-else  data-rel="popup" data-position-to="window" v-on:click="check()" >修改</a>

      				</td>			        
		        </tr>
      		</tbody>
    	</table>
		<div style="align-content: center" v-show="showresult">没有符合条件的结果</div>
        </div>
<!-- 查询弹窗 -->
        <div data-role="popup" id="myPopupDialog">
            <div data-role="header">
                <h4>查看学生成绩</h4>
            </div>
            <div data-role="main" class="ui-content">
                <p>学号：{{current_display.sno}}  姓名：</p>
                <table id="table1" style="text-align:center">
                    <thead>
                        <tr>
                            <td class="align-center">分项</td>
                            <td class="align-center">比例</td>
                            <td class="align-center">成绩</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td valign="middle"><p>平时</p></td>
                            <td valign="middle"><p>{{current_display.pOrdinary}}%</p></td>
                            <td valign="middle"><p>{{current_display.pOrdinary}}</p></td>
                        </tr>
                        <tr>
                            <td valign="middle"><p>实验</p></td>
                            <td valign="middle"><p>{{current_display.pExperiment}}%</p></td>
                            <td valign="middle"><p>{{current_display.gExperiment}}</p></td>
                        </tr>
                        <tr>
                            <td valign="middle"><p>期末</p></td>
                            <td valign="middle"><p>{{current_display.pExam}}%</p></td>
                            <td valign="middle"><P>{{current_display.gExam}}</P></td>
                        </tr>
                        <tr>
                            <td valign="middle">总分</td>
                            <td valign="middle">100%</td>
                            <td valign="middle"><p>{{current_display.totalscore}}</p></td>
                        </tr>
                    </tbody>
                </table>
                <div style="text-align:right">
                    <a href="#pageone" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b ui-mini" type="back">返回</a>
                </div>
            </div>
        </div>
<!--查询弹窗结束-->
<!--修改弹窗-->
		<div data-role="popup" id="myPopup" class="ui-content" data-dismissible="false">
			<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">关闭</a>
			<div data-role="header">
				<h4>修改学生成绩</h4>
			</div>
			<div data-role="main" class="ui-content" >
				<p>学号：{{current_display.sno}}  姓名：</p>
				<table id="table2" style="text-align:center">
					<thead>
					<tr>
						<td class="align-center">分项</th>
						<td class="align-center">比例</th>
						<td class="align-center">成绩</th>
					</tr>
					</thead>
					<tbody>
					<tr>
						<td valign="middle">平时</td>
						<td valign="middle">{{current_display.pOrdinary}}%</td>
						<td><input type="txet" placeholder="平时" v-model="gradeone"></td>
					</tr>
					<tr>
						<td valign="middle">实验</td>
						<td valign="middle">{{current_display.pExperiment}}%</td>
						<td><input type="txet" placeholder="实验" v-model="gradetwo"></td>
					</tr>
					<tr>
						<td valign="middle">期末</td>
						<td valign="middle">{{current_display.pExam}}%</td>
						<td><input type="txet" placeholder="期末" v-model="gradethree"></td>
					</tr>
					<tr>
						<td valign="middle">总评</td>
						<td valign="middle">100%</td>
						<td valign="middle"><p>{{current_display.totalscore}}</p></td>
					</tr>
				</table>
				<div style="text-align:right">
					<button type="submit" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b ui-mini" v-on:click="modify_go()">确定</button>
				</div>
			</div>
		</div>
<!--修改弹窗结束-->

    	<script>
        window.onload = function() {
            var a = document.getElementById("tablebox");
            var scroll_width = 100; //滚动一下的距离
            if(document.addEventListener){
                document.addEventListener('DOMMouseScroll', mousewheel_event, false); // FF
            }
            a.onmousewheel = mousewheel_event;
            function mousewheel_event(e) {
                var e = e || window.event, v;
                e.wheelDelta ? v=e.wheelDelta : v=e.detail;
                if(v>3||-v>3) v=-v;
                v>0 ? a.scrollLeft+=scroll_width : a.scrollLeft-=scroll_width;               
                e.preventDefault(); //阻止浏览器的默认滚动
            }
        };
		</script>


<script>
    var vm = new Vue({
        el:"#search",
        data:{
			permission: [[${permission}]],
			showresult:false,
            start:[[${currentSemester.start}]],
            semester:0,
			cname:0,
			cno:0,
			sno:null,
            gradeList:[],
            current_display:{
                sno:null,
                totalscore:null,
                percent:null,
                pOrdinary:null,
                pExperiment:null,
                pExam:null,
                gOrdinary:null,
                gExperiment:null,
                gExam:null
            },
			//修改单个成绩
			gradeone:null,
			gradetwo:null,
			gradethree:null,
			newdetail:null,
			//获取老师课程
			courses:[]
        },
        methods:{
			check: function () {
				alert("您目前没有修改权限！");
			},
			search_go:function(){
				if(this.sno==null){
					this.sno =-1;
				}
				this.$http.get("/getstudentgrade",
						{params:{start:this.start,semester:this.semester,
								cno:this.cno,sno:this.sno}}).then(function(res){
					this.gradeList=res.body.data;
					if (res.body.data.length==0){
						this.showresult=true;
					}else{
						this.showresult=false;
					}
					console.log(res.body);
				},function(res){
					console.log('失败');
				})
				if(this.start!= [[${currentSemester.start}]] || this.semester!= [[${currentSemester.semester}]]){
					this.permission = false;
					console.log("没有权限！")
				}else{
					this.permission = true;
				}
			},
            detail:function(parma){
                this.current_display.sno=parma.sno;
                this.current_display.percent=parma.percent;
                this.current_display.totalscore=parma.totalscore;
                var sp = parma.percent.split(/,/);
                this.current_display.pOrdinary=sp[0];
                this.current_display.pExperiment=sp[1];
                this.current_display.pExam=sp[2];
                var gsp = parma.detail.split(/,/);
                this.current_display.gOrdinary=gsp[0];
                this.current_display.gExperiment=gsp[1];
                this.current_display.gExam=gsp[2];

				this.gradeone=this.current_display.gOrdinary;
				this.gradetwo=this.current_display.gExperiment;
				this.gradethree=this.current_display.gExam;
            },
			//修改单个学生的成绩
			modify_go: function(){
				console.log("gradeone:"+this.gradeone);
				this.sno=this.current_display.sno;
				this.newdetail = this.gradeone+","+this.gradetwo+","+this.gradethree;
				console.log("new:"+this.newdetail);
				this.$http.get("/setstudentgradeById",
						{params:{start:this.start,semester:this.semester,
								cno:this.cno,sno:this.sno,detail:this.newdetail}}).then(function(res){
					console.log(res);
				},function(res){
					console.log('失败')
				})
			},
			//获取老师某学期教的所有课 如果不是这学期的则不可以修改
			get_course:function (semester,start) {
				console.log(semester);
				console.log("change!!"+this.start+this.semester);
				this.$http.get("/getteachercourse",
						{params:{start:this.start,semester:this.semester}}).then(function(res){
					this.courses = res.body.data;
					console.log(res);
				},function(res){
					console.log('失败')
				})
				if(this.start!= [[${currentSemester.start}]] || this.semester!= [[${currentSemester.semester}]]){
					this.permission = false;
					console.log("没有权限！")
				}
			}


        }
    })
</script>

      	</div>
  	</div>
  	<!-- 底部 -->
  	<div data-role="footer">
    	<h1>版权所有</h1>
  	</div>
</div>
</body>
</html>